<template>
  <div class="versionComparison-container">
    <div class="comparison-header">计划版本对比</div>
    <div class="comparison-body">
      <div class="desc-card">
        <a-row>
          <a-col :span="6">变更人：{{ newVersion.creator || "-" }} </a-col>
          <a-col :span="6">变更时间：{{ newVersion.createTime || "-" }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="24"> 变更描述：{{ newVersion.remark || "-" }} </a-col>
        </a-row>
      </div>
      <div class="base-container">
        <div class="sub-title">
          <a-row>
            <a-col :span="6">
              <span class="version_1">A版本：{{ oldVersion.name || "-" }}</span>
            </a-col>
            <a-col :span="6">
              <span class="version_2">B版本：{{ newVersion.name || "-" }}</span>
            </a-col>
          </a-row>
        </div>
        <div class="table-container">
          <vxe-table
            ref="xTree"
            align="center"
            height="99%"
            class="scrollbarStyle"
            border="full"
            show-overflow
            show-header-overflow
            :data="tableData"
            :column-config="{ resizable: true }"
            :scroll-y="{ enabled: true }"
            :scroll-x="{ enabled: true }"
            :tree-config="{
              rowField: 'uuid',
              parentField: 'parentId',
              childrenField: 'childList',
              expandAll: false,
            }"
            :loading="loading"
          >
            <vxe-colgroup title="任务名称">
              <vxe-column
                field="A"
                title="A版本"
                tree-node
                align="left"
                header-align="center"
                width="200"
              >
                <template #default="{ row }">
                  <span class="version-A">
                    {{ row.oldData ? row.oldData.name : "" }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column
                field="B"
                title="B版本"
                align="left"
                header-align="center"
                tree-node
                width="200"
              >
                <template #default="{ row }">
                  <span class="version-B">
                    {{ row.newData ? row.newData.name : "" }}
                  </span>
                </template>
              </vxe-column>
            </vxe-colgroup>
            <vxe-column title="操作状态">
              <template #default="{ row }">
                <span :class="filterStatusClass(row.flag)">
                  {{ filterStatus(row.flag) }}
                </span>
              </template>
            </vxe-column>
            <vxe-colgroup title="工期">
              <vxe-column title="A版本" width="80">
                <template #default="{ row }">
                  <span class="version-A">
                    {{ row.oldData ? row.oldData.duration : "" }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column title="B版本" width="80">
                <template #default="{ row }">
                  <span class="version-B">
                    {{ row.newData ? row.newData.duration : "" }}
                  </span>
                </template>
              </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="计划开始时间">
              <vxe-column title="A版本">
                <template #default="{ row }">
                  <span class="version-A">
                    {{ row.oldData ? row.oldData.planStartTime : "" }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column title="B版本">
                <template #default="{ row }">
                  <span class="version-B">
                    {{ row.newData ? row.newData.planStartTime : "" }}
                  </span>
                </template>
              </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="计划完成时间">
              <vxe-column title="A版本">
                <template #default="{ row }">
                  <span class="version-A">
                    {{ row.oldData ? row.oldData.planEndTime : "" }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column title="B版本">
                <template #default="{ row }">
                  <span class="version-B">
                    {{ row.newData ? row.newData.planEndTime : "" }}
                  </span>
                </template>
              </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="关键节点">
              <vxe-column title="A版本" width="80">
                <template #default="{ row }">
                  <span
                    v-if="row.oldData"
                    :class="[filterMajorClass(row.oldData.major)]"
                  >
                    {{ row.oldData ? filterMajorNmae(row.oldData.major) : "" }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column title="B版本" width="80">
                <template #default="{ row }">
                  <span
                    v-if="row.newData"
                    :class="[filterMajorClass(row.newData.major)]"
                  >
                    {{ row.newData ? filterMajorNmae(row.newData.major) : "" }}
                  </span>
                </template>
              </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="节点类型">
              <vxe-column title="A版本">
                <template #default="{ row }">
                  <span class="version-A">
                    {{ row.oldData ? row.oldData.nodeType : "" }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column title="B版本">
                <template #default="{ row }">
                  <span class="version-B">
                    {{ row.newData ? row.newData.nodeType : "" }}
                  </span>
                </template>
              </vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="节点等级">
              <vxe-column title="A版本">
                <template #default="{ row }">
                  <span class="version-A">
                    {{ row.oldData ? row.oldData.nodeLevel : "" }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column title="B版本">
                <template #default="{ row }">
                  <span class="version-B">
                    {{ row.newData ? row.newData.nodeLevel : "" }}
                  </span>
                </template>
              </vxe-column>
            </vxe-colgroup>
          </vxe-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
export default {
  data() {
    return {
      newVersion: {},
      oldVersion: {},
      tableData: [],
      loading: false,
    };
  },
  filters: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      let { newVersionId, oldVersionId, proCode, nodeType } = this.$route.query;
      axios
        .post(
          `/probusiness/scheduleItemVersion/compareVersion`,
          {
            proCode,
            newVersionId,
            oldVersionId,
            nodeType,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          this.newVersion = res.data?.newVersion ?? {};
          this.oldVersion = res.data?.oldVersion ?? {};
          this.tableData = res.data?.treeData?.childList ?? [];
        })
        .catch((_) => {
          this.newVersion = {};
          this.oldVersion = {};
          this.tableData = [];
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //校验关键节点
    filterMajorNmae(val) {
      switch (Number(val)) {
        case 1:
          return "是";

        case 2:
          return "否";

        default:
          return "";
      }
    },

    filterMajorClass(val) {
      switch (Number(val)) {
        case 1:
          return "success";

        case 2:
          return "reject";

        default:
          return "";
      }
    },
    //校验状态
    filterStatusClass(val) {
      switch (Number(val)) {
        case 0:
          return "default";

        case 1:
          return "success";

        case 2:
          return "reject";

        case 3:
          return "warning";

        default:
          return "";
      }
    },
    filterStatus(val) {
      switch (Number(val)) {
        case 0:
          return "无操作";

        case 1:
          return "新增";

        case 2:
          return "删除";

        case 3:
          return "修改";

        default:
          return "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.versionComparison-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f3f4f6;
  .comparison-header {
    height: 64px;
    background: #ffffff;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    display: flex;
    align-items: center;
    padding: 0 16px;
  }
  .comparison-body {
    flex: 1;
    box-sizing: border-box;
    padding: 16px;
    display: flex;
    flex-direction: column;
    .desc-card {
      padding: 30px 24px;
      box-sizing: border-box;
      background: #ffffff;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
    .base-container {
      margin-top: 10px;
      flex: 1;
      background: #ffffff;
      padding: 16px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .sub-title {
        padding: 0 8px 24px 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        .version_1 {
          color: #3759a0;
        }
        .version_2 {
          color: #db7828;
        }
      }
      .table-container {
        flex: 1;

        /deep/.vxe-table {
          .vxe-table--header-wrapper {
            table {
              thead {
                .vxe-header--row:nth-child(2) {
                  .vxe-header--column:nth-child(odd) {
                    background: #e1e9ff;
                    color: #3759a0;
                  }
                  .vxe-header--column:nth-child(even) {
                    background: #ffe8d5;
                    color: #db7828;
                  }
                }
              }
            }
          }
          .vxe-table--body-wrapper {
            table {
              tbody {
                .vxe-body--row:nth-child(odd) {
                  .vxe-body--column:nth-child(odd) {
                    background: #f5f8ff;
                  }
                  .vxe-body--column:nth-child(even) {
                    background: #fff9f3;
                  }
                  .vxe-body--column {
                    &:nth-child(1),
                    &:nth-child(4),
                    &:nth-child(6),
                    &:nth-child(8),
                    &:nth-child(10),
                    &:nth-child(12),
                    &:nth-child(14) {
                      border-left: 1px solid #c4d4fd;
                    }
                    &:nth-child(3) {
                      border-left: 1px solid #e8eaec;
                    }

                    &:nth-child(2),
                    &:nth-child(5),
                    &:nth-child(7),
                    &:nth-child(9),
                    &:nth-child(11),
                    &:nth-child(13),
                    &:nth-child(15) {
                      border-left: 1px solid #ffd0ab;
                    }
                  }
                }
                .vxe-body--row:nth-child(even) {
                  .vxe-body--column {
                    border-bottom: 1px solid rgba(245, 248, 255, 0.9);
                    background: #ffffff;
                    &:nth-child(1),
                    &:nth-child(4),
                    &:nth-child(6),
                    &:nth-child(8),
                    &:nth-child(10),
                    &:nth-child(12),
                    &:nth-child(14) {
                      border-left: 1px solid #c4d4fd;
                    }
                    &:nth-child(3) {
                      border-left: 1px solid #e8eaec;
                    }

                    &:nth-child(2),
                    &:nth-child(5),
                    &:nth-child(7),
                    &:nth-child(9),
                    &:nth-child(11),
                    &:nth-child(13),
                    &:nth-child(15) {
                      border-left: 1px solid #ffd0ab;
                    }
                  }
                }
                .vxe-body--row {
                  .vxe-body--column {
                    font-weight: 400;
                  }
                }
              }
            }
          }
        }

        .version-A {
          color: #3759a0;
        }
        .version-B {
          color: #db7828;
        }

        .default {
          color: #8c8c8c;
        }
        .success {
          color: #4bc964;
        }
        .warning {
          color: #f07f17;
        }
        .reject {
          color: #ff3f4a;
        }
      }
    }
  }
}
</style>
